We have a page with a table of invoices on it inside an iframe. In IE, horizontal scrolling works and looks fine. On Chrome, if you scroll over to the right, then back to the left, you see these ugly vertical lines:
This seems like a problem with doctype, but I've tried changing that and it hasn't helped. This only occurs in Chrome and only after horizontal scrolling; Firefox and IE do not show these. I'm thinking that it has to do with some HTML on the page that Chrome is rendering differently but I haven't been able to find exactly what it is.
Has anyone seen this before or have an idea on how to fix it?
I believe it's related to a Chrome bug:
https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/chromium-bugs/eUfzp3UJDwo%5B1-25%5D
A possible workaround (or hint for a workaround here):
Chrome bug: iframe rendering lines on screen when scrolling up
Related
I ran into a following issue. I have a popup dialog with a scrollbar. In Google Chrome it has space reserved for a scrollbar. However, Firefox does not reserve any space for a scrollbar, so when it appears, it can overlap content (see screenshots). Probably it is somehow related with the fact, that firefox hides scrollbar unless you hover scrollable area. Could you suggest any solution to make firefox reserve space for scrollbar the same way as Chrome do?
Screenshot in Firefox
Screenshot in Chrome
Really great question! Unfortunately, As far as I'm aware, there is no simple solution to this problem. I would recommend creating a design that looks good with or without the space differences that the scrollbar creates.
But if you are dead-set on creating a more versatile solution, you could change the scrollbar using Javascript/Jquery (See this answer:Custom CSS Scrollbar for Firefox), or you could try and detect the browser, and accommodate extra padding for elements with scrollbars for users using Firefox(See this answer: How to detect Safari, Chrome, IE, Firefox and Opera browsers?)
I have a site that works fine in Chrome, Firefox, IE7-11, android, iOS (both ipad and iphone) yet for some unknown reason all elements except the header and rotating banner are invisible in Safari and only Safari.
The elements are all present and when inspected the outlines of each individual elements appear.
If I disable CSS the elements all appear and are there.
As I scroll through the page, which for the post part is just blank white space occasionally some of the elements will reappear in a very glitchy way, perhaps just a thin vertical stripe of the element will be visible then it will disappear.
I can't make the site public at the moment, but here is a screenshot showing the issue:
Has anyone had something similar happen before in Safari, or have any suggestions?
It looks like the div is hidden.
Add z-index:1; to the div with tdp_row_fullwidth center-yes light-no class and the div shows up in safari for me.
What worked for me was the font-family that was being used was not loaded in Safari, once I changed it, the element "showed" up.
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!
When I put style='direction: rtl;' the vertical scrollbar should switch sides and show on the left instead of right. This is how it works in IE and FF, but in Chrome it remains on the right.
Is it a known bug? Is there any way to fix it?
This is a known webkit bug. The scroll will render on the right in Safari, as well.
There's an answer here that has several different workarounds, including the jQuery plugin jScrollPane and a native-looking hack.
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.