On my site there is a block with a map that is made as a SVG sprite, if you hover over a point, the whole map becomes darker and only the selected object remains. Everything works fine on the desktop and android, but on IOS in Safari and Chrome it doesn't want to work it out (the map turns white).
Site link: http://lorri.beget.tech
Map example(image)
Related
I've been struggling to make this 3d model display at the right place on Samsung Internet browser.
Here's the link on Glitch:
https://juniper-evening-guilty.glitch.me
To reproduce the issue:
open the link above in Chrome's on android phone, then allow camera access and point the camera at below marker
https://i.stack.imgur.com/5cahN.png
Result: The 3d model will load up just fine, right above the marker.
Open the same link in Samsung Internet browser on android phon.
Result: you won't see the 3d model - in fact it's loaded up but is displayed out of place, and you need to move the camera very close to the marker before you will see only part of it.
Expected Result: 3d model shows up right above the Hiro when using Samsung Internet browser, like what we got with Chrome browser.
I have two distinctly different presentations of a page, depending on landscape or portrait orientation. The first img on that page is assigned (via javascript) a landscape or portrait proportioned src depending on the orientation. This works on Safari, Chrome ,Firefox on all test desktop machines (Windows/Mac), all tested Android devices using Chrome or Firefox, and IOS iPads - where it breaks is on iPhone 5/6 (probably 7).
In the .ready javascript code I blank the page using $("body").css("visibility","hidden"), do my formatting, set the "src" of the image to portraitformatpicture.jpg or landscapeformatpicture.jpg and then renable the screen with $("body").css("visibility","visible").
This method actually works in all instances - rotating the device causes the screen to go blank, after which the properly orient image appears.
The issue is only on IOS Safari on iPhones - when the device is rotated you see the current page displayed in the new orientation, with the other (previous) orientation's image displayed. You see the new orientation displaying the page flipped sideways for "a while" (100s of milliseconds) at which point the "orientationchange" event fires in the browser, allowing the javascript to run, which correctly switches the image and formatting.
So the problem isn't that the orientationchange event doesn't occur, it's that the page is visible before any of the orientation-specific logic has had a chance to run.
How have any other folks addressed this? There is no notification that I'm aware of that can inform the javascript that a screen orientation change is imminent, only that one has already occured...
When I use Chrome on any mobile device the signature will only work if the page is displayed in default zoom. If I zoom in on the signature area it won't render correctly. It looks like the x and y coordinates are offset and the signature is drawn outside the visible area.
This issue can be reproduced on the jSignature demo site:
http://willowsystems.github.io/jSignature/#/demo/
Example devide: Samsung Galaxy S5 using Chrome version 46.0.2490.76
I have also tested on a Lenovo tablet with the same result in Chrome.
I'm wondering if anyone has a workaround/fix for this?
Thanks,
Per
I have problems with embedded Google map. I'm using API v3, and for some reason black blocks are rendered behind map controls and marker.
Here's the screenshot:
I only have HTML5 doctors reset stylesheet, and some very simple custom styling for layout and typography. when I refresh page whole map blinks for a moment and then black blocks are rendered.
Here's codepen, but map is not displayed there for some reason. I have marked it with: [GOOGLE MAP] so it's easier to find.
http://codepen.io/Jinx/pen/bcrpn
[UPDATE]
I have created new html without any content except map div element and all scripts and css files from original html are included and map works properly.
This confuses me because it would appear that this bug is due to HTML surrounding the map?
[UPDATE2]
I got map to render on code pen but it has no controls and no marker. Still same result on local version.
Could it be because I'm working locally?
[UPDATE3]
I just checked in Firefox, Internet Explorer 9, Opera and Safari and map is rendered perfectly. This seems like Chrome bug.
Also, I have noticed that chrome is offsetting all element boxes out of browser window visible area. Here's a screenshot.
Inspectors in other browsers show boxes normally.
It would seem this was indeed Chrome bug. I have just made copy of my project folder, and opened index.html from there and everything is fine.
I guess this was some cache problem/bug.
It is black because you have a CSS style setting it to black with a color or image that is being inherited. Check your CSS for #000000 as a background color or url() for an image.
I was working on an image gallery and it involved some heavy image moving\resizing using javascript. Everything worked like a charm on all the broswers except for IE6\7 (no wonder) and ... Google Chrome.
Basically under certain zooming each movement made Chrome redraw the background, making it jitter, change its position and then move back. I can't post link to the actual script at the moment, but I used a jquery plugin to immitate the problem:
http://danilsk.narod.ru/wtf.html (try zooming in and out and clicking images)
Does anyone know how to fight this?
I am using google chrome and I see no issue here.
Everything is running very smoothly. Try updating your browser.
FYI:
Ubuntu 10.04 LTS - the Lucid Lynx
Google Chrome 8.0.552.215