I've loaded a page with multiple SVGs on chrome.
when I zoomin/out one of the SVG is disappearing and I have no idea why this is happening.
(and it stays like this even when I zoom back to default)
any ideas?
this is the url if you want to try it yourself
http://www.facegift.co.il/canvas/?userItemId=17887&sc=987404&print=1&width=1500&pageNum=7
This is not a bug in Chrome. This is a bug in your page.
All the id attributes on the page have to be unique. But on your page, they are not.
The <linearGradient> for that botanical flourish has the id "SVGID_2_". There is also a <clipPath> element on the page with id="SVGID_2_".
Fix that problem (and any other duplicate ids) and I am certain things will start working.
Then you should also delete your Chrome bug report.
I had a very similar issue in Chrome because one of the elemets had the transform attribute:
transform="translate(0,-9000000000)"
And it made Chrome go crazy. The solution was to hide or remove the element.
Related
Can anyone help here, i'm wondering if this is actually a bug or expected behaviour?
Chrome Dev Tools seems to not be allowing hovering elements and highlighting of them in Iframes over a certain height.
For example, look here:
http://csreis.github.io/tests/cross-site-iframe-simple.html
now if you set the iframe height to 3000px, and then go and try to inspect the 'Cross the bridge' button. It does not highlight or allow you to select anything below the container you can see about half way down the picture.
I am getting this same behaviour on a different project I am working on, where the highlighting is not working in dev tools in an iframe.
Is anyone else getting this behaviour? I am using Chrome 88.0.4324.190 and am seeing this behaviour on other machines too. I am not getting this behaviour using Firefox which allows me to highlight all elements in iframes. I'm stumped on this one.
Thanks.
I have a page, all styles are authored using em unit for sizing. I am facing a strange issue in IE9.
I have a requirement to have custom zoom buttons. By clicking on that button, I am increasing the font-size of body. Eg from 1em to 2em and all child elements gets the higher inheritance and zoom is applied.
But whenever zoom is applied, texts are hidden in SELECT and INPUT fields. This gets fixed as soon as you interact with that element - that is as soon as you focus the cursor on that element, everything looks okay.
See this picture:
What could be the issue? How I might fix it?
Please note, I tried making a JS fiddle, but no success on reproducing the issue. A clone of what I have in real app can be seen here: http://shekhardesigner.github.io/IE9-EM-Sizing-ZOOM-Issue/
Make sure you have correct Standard Doctype Rendering, also you could add
"<meta http-equiv="X-UA-Compatible" content="IE=Edge" />" inside the head tag. It helps to display the webpage in edge mode, which is the highest standards mode supported by Internet Explorer, from Internet Explorer 6 through IE11.
I have a youtube video introduced by <iframe> tag (I tried by <object> also, but the results are the same). On the load page, I have a dialog modal also (that it works properly).
I don't understand why, only on IE11.0, this video is not "hidden" (meaning inactive, like all other elements of the site, until the window is closed).
Is it something special, particularly for IE, that I need to add in css? I tried z-index (only idea which I had), with negative values for this video, but it doesn't work. It is a bug of IE? I have no idea...
Thanks in advance.
PS. If it is necessary, I can add the css file also (but it's a little big).
PS.2. I repeat, for other browsers (Chrome, Firefox, Opera and Safari), this works properly (the video is inactive while the dialog modal is active (not closed).
I'm encountering a strange issue.
I have a facebook button at the bottom of a page. When clicked, the facebook "Comment/share" box pops up.
The behaviour is correct under FF and IE, but not in Chrome, where the box is cut by the bottom of the page. In other words, the page isn't resized as it is under FF and IE.
The page has a min-height and max-height, and the containers have an overflow:visible attribute as the facebook docs advises to avoid some display issues of the share iframe.
The curious thing is that the bug disappears by simply opening the developer tools, and checking/unchecking any CSS attributes of any parent element of the FB-button.
My guess is that the resize of the window isn't captured by Chrome when the button is clicked, but it is when using the developer tools.
I tried to explore other sources of the problem (max-height not working properly or a higher element having a overflow:hidden) but I found nothing conclusive.
Thank you for help.
You may have an issue if you're running a theme in Chrome. If you are, try resetting to the default theme:
options > personal stuff > themes > reset to default theme
Also, make sure you aren't zoomed out or in. Chrome gets a little funky with the zooming.
Assuming those aren't the issues, try putting the Share code in a div with a unique ID or class:
<div id="myFacebookContainer">Plugin HTML Here</div>
Your CSS would include something along the lines of this:
#myFacebookContainer span{
height:25px;
}
#myFacebookContainer iframe{
height:25px;
}
I hope one of those suggestions helps!
I am experiencing redraw issues in Chrome that I can't explain. They don't appear in any other browser. The website is http://leonardo.re
They appear after hovering over a styled DIV containing a styled link (contact page):
And sometimes on an overlaying DIV when scrolling (any page). Not always though:
Does anyone know what exactly is going on or how this can be solved / avoided?
This bug has now been resolved in newer versions of Chrome - no more issues!