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
Related
If you look at this page, you will see that the right two images are sideways:
http://www.disneypinplace.com/beta/pin.php?id=PD78685
But when you click on them, they appear correctly in full screen view, vertically. I can't see anything wrong in my HTML img code that could cause this.
Can anyone tell me why this is happening? These photos were taken with an iPhone 5 by the way.
This is a particular problem with how the iPhone exports images. Seem this link for a similar situation.
Computers/browsers and iPhone software interpret the camera metadata (details about image, including portrait/landscape) differently thus causing the difference in rendering.
I was able to download the far right image in Pixelmator/Photoshop and save it as a jpg again, making sure it was portrait. This made it so the browser properly rendered the image and did not rotate it 90 degrees.
Were these pictures taken sideways, by any chance? Have you tried editing and "exporting for web" from Photoshop, for example?
Maybe the problem is on the image EXIF (as in you only see the image correctly because the browser reads the EXIF info and rotate it on screen). Exporting it will most likely remove that info from the image file and it might make it correct.
I spent an hour with this that I'll never get back. :)
The Problem
I took the picture on my Samsung GALAXY Tab PRO 8.4. It rendered SIDEWAYS in an Android Emulator as well as in FireFox 42.0.
The Fix
I edited the picture in IrfanView.
I went to Properties_Settings -> JPG_PCD_GIF ->
UNCHECK "Auto-rotate Image according to EXIF info (if available)"
It now renders OK in FireFox. I haven't checked the emulator yet.
I am running into a random issue in a website that I am working. This website contains many images and some images are 1Mb in size or bigger. The site also uses some CSS3 tricks, like 3D rotations.
Since I added this 3D CSS stuff, I noticed a problem in Google Chrome where some random areas in the website are not rendered.
This is a screen-shoot of how the site should be rendered, the green lines are because I've enabled the "Composited render layer borders" on chrome://flags:
And this is how it get rendered when the issue happens:
This white squares appear randomly and they can disappear or reappear in another place if the scroll the website. I also noticed that this problem is more common in lower-end computers so I my guess is that somehow Chrome is running out of GPU memory.
Why this problem happens? and is the any workaround for it (besides disabling the 3d CSS)?
In case it helps, this is the website:
http://colocation.cubo.cc/cheetos/masterbrand/
Update:
I raised a issue for the Chrome team.
I couldn't reproduce this problem in the Chrome Canary.
It was a Chrome Issue, and its fixed now:
http://code.google.com/p/chromium/issues/detail?id=121779
I can only congratulate the Chrome team for pushing bugfixes so fast, I wish IE was like this.
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.
I'm building a webpage with a bunch of images that are all coming from Rackspace Cloudfiles on their Limelight CDN. Occasionally the page will finish loading, including the images, and Chrome/Webkit will fail to render some images at all.
Chrome doesn't render a "broken image" in their place, and if I check the Resources tab in the Inspector, they are listed and the data is all loaded up. The non-rendered images show the same info as the properly rendered ones.
This usually occurs when I go forward a page and then go back (via history). It persists if I reload the page, unless I do a hard refresh (⌘⇧R in Chrome), then they all show up like normal again.
I'm not loading the images in JavaScript or anything strange like that, nor do I have any CSS that hides the images. This only happens in Chrome, and it doesn't happen in Incognito mode from what I can tell.
Any ideas what's causing this? If it's a bug, how do I go about reporting it to the Chrome team?
Update
I checked the headers in the Network tab of the Inspector and it turns out that for the images that are rendered, Chrome is only showing it's header metadata, like this:
And for the images that don't render properly, the metadata is shown along with the full request and response headers with a 304 Not Modified status.
This is still happening. On multiple computers, on several websites. There's a thread about this happening over the Google support forums as well.
This might be a Chrome/Webkit bug:
http://code.google.com/p/chromium/issues/detail?id=20960
This was a Chrome bug that has since been resolved. It is not the bug linked to by thatmarvin.
I had the same problem with thumbs images using the latest chrome. Images were rendering time to time. I changed image style:
width: 150px; height: 100%;
to
width: 150px; height: auto;
And "height: auto" has fixed bug in Chrome.
Hope the founded solution will help in some cases.
I have a question regarding how to make the same website appear consistently in different browsers on different platforms.
The following is a website that I made for my professor: http://youlab.wustl.edu/Home.html. The site itself was made using iWeb while the drop down menu was manually inserted using an external HTML code provider (SoThink DHTML).
While Firefox displays the site correctly, all the other browsers had some sort of problem displaying the site.
Internet Explorer: none of the links work
Chrome & Safari: the drop down menu is shifted all the way to the left, and were not clickable since it disappeared when the mouse moved towards it.
The movie on 1 page doesn't work either.
Could someone tell me what is wrong and how to fix the problem?
Here's your answer
http://en.wikipedia.org/wiki/Cross-browser