This site: http://www.whsc.ie/ uses a jquery lightbox style plugin which seems to be breaking the layout in Google's Chrome Browser. When viewed in Chrome, the header of the site is about 30 pixels taller than it should be.
When inspecting the source elements it appears to be caused by some hidden elements that are used by the colorbox jQuery plugin.
I've tried everything I can think of to figure this out and fix the problem but to no avail.
Many thanks in advance.
My Bad!
It seems it's actually a Wordpress bug that only appears when a user is logged in. I kept seeing it on the browsers on my own machine because they were all logged in, but when I went to a different machine the bug wasn't visble.
Thanks for the replies though, much appreciated.
Related
I've got a problem using embedded pdfs inside websites with chrome (other browsers work as expected). Content, which is overlayed (like a lightbox) is disabled because the embedded pds overlays this content. Visually everything is correct, but code like hover, events, ... are not working.
I made a codepen https://s.codepen.io/stenet/debug/vzvxdq/mWkoNxYZZoGA to demonstrate the issue.
Here you can see the expected result: https://drive.google.com/file/d/18xXvIgEIzDPg1q99jfwif-nO28pC54SG/view?usp=sharing
Here you can see the wrong result: https://drive.google.com/file/d/1kYWmGxRwKvSLNSL9Tk5ZmfyJsF97jifz/view?usp=sharing
As it just happens on some computers (same version of chrome installed!) I really don't know why this problem occurs. As far as I know chrome has its own pdf viewer.
Any help would be highly appreciated!
Best regards, Stefan
I'm trying to get a job as a developer. I've made a personal website to show employers but I've got a bug. Everything is fine in all browsers except Chrome.
On the first load of the page, the navbar layout is messed up. After you hit refresh or navigate to other pages the proper layout is maintained.
I have no idea what is causing this. Can anyone help?
Link to website: www.alexanderisgr8.com
Possibly a caching issue due to an older css. Try doing a hard-refresh [ctrl+f5]?
I am having a strange problem with an app developed using Foundation Framework.
It seems that there are huge rendering problems, especially during/after scrolling. It may happen that images do not scroll together with the rest of the elements, but they remain static (as if they had fixed position with z-index -1), therefore messing with the other elements.
The issue happens only with Chrome for Windows (tested versions from 35 to 41). While on the latest Chrome (42), released yesterday, the issue is not happening.
It doesn't seem to be a known issue, but I have checked my code and everything looks perfectly fine. After all it works in every other browser perfectly, EVEN ON CHROME FOR MAC!
This is a screenshot of how the application should look.
Here are some of the rendering problem happening on Chrome for Windows after/during scrolling the page: Here, here
Any help on where this might come from, is appreciated. Thanks
Removing the height 100% from 'html' and 'body' solved the problem.
I am developing website and have a strange bug that appears only on Chrome. I have a latest Chrome version and as I googled it seems to be old bug on older versions of Chrome(v18 - v20). Basically what happens: browser loads page, but on the bottom of the screen I have white spaces/rectangles instead of content or footer. Once I hover it - the rest of the content is loaded. Any ideas, links or solutions would be great.
I tried to work with this around with setting height to auto, but this didn't help. Also tried to load page in incognito to make sure it is not caused by any of the extensions I use, but this as well had no affect in resolving the issue.
Another solution that I think of is to set interval to re-trigger CSS in some milliseconds the page is loaded, but this is not the best solution and there should definitely be some other, more optimal, way to solve this.
P.S.:
All other browsers work like a charm.
Thanks in advance for the help.
In my case issue was with fade-in animation set on whole content. As website owner decided to skip the animation to save time. No further digging was done.
I'm currently working on a responsive design site prototype. So far so good, but for one really strange thing which I can only seem to reproduce in Chrome. When expanding the window, sometimes the browser seems to get trapped between states, showing duplicate elements, and two scrollbars - that is, until I click somewhere outside of the browser window, then everything gets redrawn and looks just fine.
Screenshot:
I've tried a plethora of "tricks" to get chrome to "re-jig" the interface programmatically, such as changing the padding of the body element, modifying the scrollY position, and about 10 or so others, but nothing seems to do the trick. Does anyone have any experience with this? Any advice?
This looks like a bug in Chrome.
I searched Chromium bugs and found a few that are similar:
Issue 516127: Rendering artifacts on osx when something moves above the browser (dock, other windows, etc)
Issue 473933: Visual rendering issue
Issue 476909: Page didn't redraw correctly
Issue 245946: Content isn't layout correctly when resizing window
But actually none of them seems to describe your problem exactly. If you think so too, you can report your bug here.
Note that this might be as well an issue related to your old Mac OS version or even the graphics card.
Try adding this just after <head> tag
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
I had the same problem using cordova (hybrid html5/css3 mobile platform), when rotating the device the internal browser did not refresh correctly. I had a div containing everything with a fixed position. After some tries, I used style width/height: 100% and when rotating the browser refreshed correctly.
I second the suggestion to check plugins installed in case there's a conflict.
Looking on Google's forums, the issue has arisen before and was scheduled for a bugfix. Noticed while reading there that they also removed the support for browser window resizing via javascript :/
I'm guessing you have a retina display Mac and another external display connected? I see this sometimes on my setup and have tentatively narrowed it down to this situation. When using just the native screen I never see it and not in all screen configurations either.
Try and see if it happens when you use only the built in screen. If that works try switching which screen is the main screen or switch to another external screen altogether.
Sorry for the no fix, but maybe it will get you closer to a solution in your setup at least.