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.
Related
When working on a website on my local server, I came across an issue with Croppie.js. The issue only happens when a modal is used to crop the image — for example, everything works fine here:
[codepen](https://codepen.io/azerafati/pen/VzOGRe)
I was able to reconstruct the issue on Codepen using the following image.
The Issue
With a modal on Codepen, the issue only happens in the Editor view — Image B:
[codepen](https://codepen.io/amatek/pen/GREvEbG). Surprisingly, everything seems to work as expected in the Details view — Image A: [codepen](https://codepen.io/amatek/details/GREvEbG).
Normal behaviour: When using the zoom slider on the modal in the Details view, the image is transformed from the center.
The bug: However, the image is transformed from a corner when in the Editor view. This somehow leads to a black image being uploaded when the crop button is clicked.
Sometimes (depending on the amount of zoom applied), instead of a black image:
only the left side of the image is uploaded with the right side is
cut off; or
the image is uploaded zoomed in to the corner.
There is still misalignment even when the zoom is not applied.
Environment
From my tests so far, this issue does not happen on mobile browsers (although I only tested with Google Chrome and Mozilla Firefox). I have noticed the issue on Desktops with Windows 7 and 10 (I am yet to test on other Operating Systems).
Bug Present
Windows 10: Google Chrome and Microsoft Edge
Windows 7: Microsoft Edge
No Bug
Windows 10: Mozilla Firefox
Windows 7: Google Chrome and Mozilla Firefox
My Efforts so far
I have tried debugging the croppie.css and croppie.js files, but to no avail. However, I strongly suspect the problem lies in the js file. It might have something to do with the the css transform-origin property or the functions for obtaining the image dimensions returning different values on modals. Does anyone have an idea on what the cause of this issue might be?
Got this problem on latest Chrome when used croppie inside of modal
Helped me to change style in bootstrap modal .modal-dialog class
image
Style that you need to update
Setting transform to unset instead of using translate function.
Hope it helps you too
It appears that the extra padding applied to the outer modal div by bootstrap when triggering the modal('show') was what caused the problem, for me at least. Once I removed the extra padding the problem was fixed. Seems like this padding somehow messed with the point calculation when cropping or moving the viewport. I'm still using an older bootstrap version though, so I'm not sure if that would be a fix for the newer ones.
I had this problem on Chrome only probably caused by their last update, since everything was working fine for some time now. On Mozilla there were no issues to begin with.
I am working with leaflet to render construction plans for our software. The plans are jpg tiles.
It worked since about 9 months in the browsers IE11, firefox, chrome, safari. But since yesterday I cannot see the tiles in IE11 but it loads the tiles and the tiles are also in the DOM. I thought it is maybe a CSS issue, but I am not able to fix it.
Does someone know which issues this could be?
leaflet version: 1.2.0
leaflet.markercluster: 1.2.0
It is a react application with react 16
Thank you for your help.
I checked the network connections and paste the tile links in a new tab, everything worked.
Then I found out that there was a visibility: hidden css attribute active. I set it to visible but then there were just small icons with in a x in it, so that the image wasn't loaded.
Next we analyzed what we have changed in the last time and we found out that we changed the URL of the tiles because of security issues.
And then we compared the old and the new image responses and found out that there was no Content Type set in the response.
So this was the issue.
Leaflettiles in IE11 need the right content-type in the response of the image (in our example it is image/jpeg)
I have a page where necessary elements are repositioned over some extra html attributes.
For example:
<div class="contentplate" relativePosition="top-left" relx="1" rely="3" relw="14" relh="8" relFontSize="80"></div>
is repositioned by class 'contentplate'. It is positioned to a raster related on the actual windowsize. It's child elements are processed recursively to get the relative positioning also working inside this containers. All of this works as expected.
The trouble begins when using jQuery('parentcontainer').animate( {left:0},100 ) or something:
in some way repositioning the elements leads, jquery to animate only the parent element and not the childs.
the funny part is after te animation is done, the position of the childs is corrected somehow by jQuery but as told not animated.
All the elements are styled position:absolute, overflow:hidden
and no, the repsotion algorithm only runs if the window is resized, or after the page has been loaded once.
I have 3 Test for you if you are interested:
the site fully dynamically repositioning (animation is failing, except in firefox)
http://www.bourier.org/demos/jquery_animation_failure/test_2.html
a snapshot of a repositioned site without active repositioning (all browsers, all good)
http://www.bourier.org/demos/jquery_animation_failure/test.html
a fully dynamically repostioning site with a yellow grid you can see enabled
http://www.bourier.org/demos/jquery_animation_failure/test_3.html
a screenshot where you can see the dynamic page with grid enabled
thanks for your time
As it seems, it is a bug in the browser Engine correlated to usage of a canvas and CSS modifications of div's z-ordered above.
The canvas is there only for checking the grid features are correct e.g. debugging purposes.
I removed the canvas and everything is working now as expected.
There is something very wrong, can be shown here using the chrome developer tools:
The elements are detected in the correct position by the debugger, and mousepointer, but they are not displayed there. very odd this.
i don't want to digg deeper than this, but in my opinion the Firefox behaviour is correct and Chrome and Safari are doing something very wrong.
If i should post a issue report to chrome developers leave a comment and i will.
Not sure if this is a problem due to using transparent backgrounds, but I am using a webview to show a webpage to the user, however if the user loads another url from a link or javascript is used to dynamically insert new content into the page the rendering seems to glitch.
By glitch I mean that the page remains in the background whilst the new content / page is loaded in the foreground. They end up overlapping and making everything very unreadable.
I have hardwareacceleration turned off on my webview to enable transparent background, could that be causing the problem?
It's similar to this question Android Webview Content Overlapping While Using Transparent Background.
Many thanks.
This was due to the fact I had transparent background on, I removed this and it was okay. Not the best solution but one that is preferred over having glitchy graphics. I mimiced the transparent background by matching the CSS background properties to that of where my WebView was positioned.
Had the same problem on Google TV boxes and managed to fix this by forcing WebKit to redraw the DOM from jQuery as in:
$('<style></style>').appendTo($(document.body)).remove();
or (if you don't like jQuery):
document.body.style.display='none';
document.body.offsetHeight;
document.body.style.display='block';
You can inject either of the code fragments dynamically from Android as in webView.loadUrl("javascript:(function(){ /* put the force-redraw-code here */ })()") or do it directly from JavaScript after you altered the DOM.
More related fixes at How can I force WebKit to redraw/repaint to propagate style changes?
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