I have a Web-App written in Typescript with Angular.
This displays a huge SVG element with d3js and renders many smaller SVGs on it, at least 100. It also has a header, that is a .png image. This image is not rendered in IE11, in fact, after inspecting the DOM IE removes the whole element from it.
This is my code for rendering the .png.
<img ng-controller="Ctrl as ctrl" src="images/logo.png" class="logo"
tooltip="{{'version' | translate:ctrl.version}}" tooltip-placement="bottom"/>
If you refresh the page, it shows for a second, then get's removed.
This only happens in IE, not in Firefox or Chrome.
Related
After setting up the storybook-tailwind-dark-mode add-on for Storybook (by following these steps), my component is no longer displaying correctly in dark-mode in the Canvas view. The component displays correctly while in Document view and other components are displaying correctly in canvas view, so not every component has this issue.
The elements are visible for a split second before the page goes blank. When inspecting the page, I can see all of the elements are there, but they are just not visible.
The only difference to the HTML seems to be the dark class added to the body element.
Any ideas as to why the elements are no longer displayed would be greatly appreciated ⚡️
I've inspected the elements to see what could be causing the elements to not be displayed. I was expecting to see a change to display:none or an element that is in front of the other elements, causing them to be hidden, but it seems the only change is the dark class being added to body.
I've also looked at ./storybook/preview.js and ./storybook/main.js for anything suspicious but I haven't found anything that looks out of place.
There was a modal <div> that had a dark:bg-gray-800 class that was being overlayed over all of the other elements.
The modal was correctly set in light mode to show and hide according to when the modal was open/closed, but this conditional was not applied for dark mode, so the modal was always open, and hiding the other elements.
I'm using CK editor plugin for strapi. The markdown module is desactivated so ck editor returns html. On the frontend i'm using react (next.js) . Everything seems to be working fine, but the resizing is not working. When I resize an image I get a <figure> tag with a inline size of the width of the resized image and classes image image_resized, however the <img> tag inside <figure> has an attribute of sizes='100vw'. the image is bleeding out of the <figure> tag and is never actually resized even though I can see the correct width is passed to <figure>
I checked the documentation but couldn't find anything , did I miss something ? Am I to do something on my frontend so the images resize correctly ?
You can just do at global styles:
img{width:100%;}
or
figure img{width: 100%;}
I have problem since the latest Chrome browser was released.
I'm using angular 1.2.0 app with ng-animate included.
In my index file I have container element like
<div id="container" ng-class="{container:$root.container}" ng-view ng-cloak ></div>
Since the latest Chrome release I have the issue, when the transitions are finished the app view ends with 2 container with vertical/horizontal scroll. They become three, four and so on in the DOM after each transition.
The inline css snapshot in Chrome, when I have only two DOM containers is:
class="ng-scope container ng-animate ng-leave ng-animate-start ng-animate-active ng-leave-active"
for the first one and
class="ng-scope container ng-animate ng-enter ng-animate-start ng-animate-active ng-enter-active"
for the second.
The problem is the this is only on Chrome 49. On other browsers it is acting as expected. On firefox for example (same applies for safari) looking at the DOM on the on each transition I can see that the ng-animate creates second element and then removes it. It ends only with
class="ng-scope container"
Anyone with same problem ? I can't see any decent solution for now. I don;t want to add watchers in some parent controller or any similar ugly patch.
Thanks in advance guys!
I'm trying to nest an iframe inside a div to fix the height of the iframe by fixing the height of the div.
My problem is the amount of the iframe that shows on a desktop browser is different from the amount that shows on a mobile browser (safari and chrome of iOS). It's like 3em on mobile does not equal 3em on desktop
Below is the div/iframe html:
<div name="iframe-div" style="height:3em; overflow:hidden; font-size:12px">
<iframe src="http://blog.mycitylives.com/2012/02/twn-links/" frameborder="0" scrolling="no" " width="90%" height="810px">
</iframe>
</div>
It's being displayed on the iframe src link above.
the 'em' unit is a relative measurement, literally referring to the width/height of the 'm' character for the font type and font size. so, i would expect the size of a mobile to naturally be smaller than a desktop. the css interal to the iframe page may be causing conflicts as well.
try using pixels or a percentage instead.
I have a question about IE7 and how it ”interprets” title and alt HTML tags.
I’ve this constalation on a site:
<a title="My Name" alt=" My Name " class="profile_image" href="/members/my-ane">
<img rc="/uploads/sfguarduserprofile/229/11066_60x60_3f9ee652879b2e3209698830c9ff1583.jpeg" alt="11066_60x60_3f9ee652879b2e3209698830c9ff1583">
</a>
Now, when hover with my cursor in IE 8+, Firefox, Chrome, Safari, you-name-it it shows “My Name” in the alt-box.
But when heading over to IE7, it shows: 11066_60x60_3f9ee652879b2e3209698830c9ff1583 which would be the image alt tag.
I have the possibility to change the alt text on the image but if there is any solution other than that, I would very much appreciate it so I don’t use too much time on a relatively small problem in a single browser.
And are there any explanation why IE7 can’t figure this out oppose to its bigger brothers, IE8, 9+ ??
Sincere
- Mestika
Technically, the alt attribute should serve as alternative content in case the image doesn't load. In your case, there is no contextual need for an alt tag, as a user that cannot view the profile image does not need to see the image to understand the rest of the content.
The image should have an empty alt attribute per the WHATWG.