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!
Related
I’m seeing an issue where text only shows up after scrolling the HTML elements out of viewport or after switching to another tab and back. The same issue also happens in WKWebView. Is there a way to prevent this issue from happening? These sections can be scroll horizontally. Not sure if that’s related, but I find it very odd that Safari doesn’t render text that’s in the viewport.
In the attached image, you can see that there are blank rows under EU, UK and US.
Any suggestion is appreciative.
--
Added another image showing HTML elements. Element with .wrapper-row is the one that has overflow-x property. This works perfectly fine on desktop including when simulating to mobile responsive size, but has an issue even with Chrome on iOS.
I found a workaround. After playing around with debugger, I believe this has to do with iOS trying to optimize what content to load. The problem is that it's incorrectly optimizing and not loading content within the initial visible viewport. This is a similar issue where sometime I have to trigger a fake scroll so that content aligns properly in Safari on iOS especially with position fixed or absolute.
To make sure content shows up. I did the following:
$('.selector').css('visibility', 'hidden');
setTimeout(function(){
$('.selector').css('visibility', 'visible');
}, 10);
This must be done outside of the main thread execution or it doesn't work. That's why I'm putting a small timeout before executing it.
I found an article that mentioned that this has to do with
-webkit-overflow-scrolling: touch
and that a solution is to add
-webkit-transform: translateZ(0px)
but that didn't work for me. You can reference that thread here just in case my solution doesn't work for you and this one does.
iOS textarea text hidden when using -webkit-overflow-scrolling: touch
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'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.
I use Chrome 15.0.874.106 m
My issue may be related to (but not quite the same) :
Strange scrollbars around the svg background in chrome
or
scrollbars in chrome
Considering these other stackoverflow questions on Chrome+svg, i suspect a bug in chrome.
So my issue :
i include an svg in a simple html page.
Under chrome everything seems fine. When i zoom in, svg is correctly resized.
Issue is that when i zoomOut then, some unwanted scrollbars show right and below.
(as i use a mouse wheel, they sometime show only once every other mouse wheel click).
I tried to style overflow:hidden or overflow:visible : scrollbars are still there.
Whenever i reload, display is fine again : scrollbars disappear.
You can have a look at this test html file (if you use chrome !) :
http://www.akelai.fr/logo/
Any (easy) fallback solution ? Thanks
This is a bug in the WebKit rendering engine, so the problem is reproducible in both Chrome and Safari. The bug has been fixed in Version 528+ on Nov 18, 2011, and I verified it is fixed in the most recent nightly build.
https://bugs.webkit.org/show_bug.cgi?id=43018
Hopefully that means the next major release of both Chrome and Safari will fix the problem.
I have a weird one: on my site http://tustincommercial.com some pages are aligned slightly differently from others, giving a jumping effect.
Compare http://tustincommercial.com vs http://tustincommercial.com/who-we-are to see the effect.
The markup is identical, apart from the content in the middle. The same CSS is being applied.
Now, the real killer is that this difference disappears when developer tools are open. All browsers (IE8, Chrome, Safari, Firefox, Opera) show the difference when developer tools are not open. None of them show the difference when their developer tools are open.
Any ideas on the best way to find and fix the source of the difference?
The issue comes from the scrollbar appearing when your content goes past the bottom of the window. When the developer tools are open all pages need to scroll, so the jump disappears.
There are a few ways to fix this, but I currently can't tell you what would be best for your site. You could make it fixed width, you could try using max-width, or you could force the scroll bar to always be present:
html {
overflow-y: scroll;
}