I work with angular-calendar-scheduler and the events is displayed properly in chrome and brave browser. But in Firefox, the height is not displayed correctly.
I don't know if this is a big issue or something about Firefox's settings, so thanks for the help.
Also, a small issue is that in the browser that it work (like chrome), when I change the hours, I need to hover, and then the height it displayed. it not displayed without hover the event.
Here are 2 pic from chrome and Firefox.
Image from chrome, height displayed correctly
Image from firefox, height not displayed correctly
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.
The site in question: americandream.org.es/en
I have been working on this bug for two days now. My main navbar has several clickable buttons with dropdown content. On Chrome for desktop (where I designed it) this works fine regardless of how you resize the window (responsively adapts to desktop, iPad, and mobile display modes), and the same is true with Firefox and Internet Explorer for desktop. The mobile version also works perfectly in Safari, Chrome, and Firefox on iPhone 5.
However, the dropdown content does not appear on click on the actual iPad in any browser I have tested (Firefox, Chrome, or Safari) and it does not appear in Safari for desktop, either. While the dropdown content displays in the Chrome browser for desktop, the debugger for Chrome does not display the dropdown content, either, but shows a box where the dropdown content should be displayed.
I can see in the Chrome debugger that the class .dropdown-content.show does activate and change from display: none to display: block on click, but it is just buried behind other page content. When I delete all other page content, I can see that the dropdown content is indeed toggling and displaying properly.
So I am deducing that the problem has something to do with how Safari and some browsers on iOS for iPad understand z-index? The navigation bar has a z-index: 9999, which .dropdown-content should inherit, but I know that there is more to z-index than that the biggest number always shows up on top.
But what exactly is wrong and how do I fix it? I have tried manually specifying opacity: 1 and z-index: 9999 for .dropdown-content, and I have tried adding the -webkit-transform: translate3d(0,0,0) hack described here and here to override iPad and force hardware acceleration, but maybe I am not implementing that hack correctly? Do I have the display settings set wrong in the navbar css? I am also confused as to how the exact same javascript and display settings work fine in every browser on iPhone but no browser on iPad.
Any insight is appreciated. I just started teaching myself web design about a month ago, so I'm sure it's a simple mistake, but I am lost.
Removing the overflow:hidden from ul.topnav will allow the dropdown to show
We have a website whose background is a stack of images through which we go with JavaScript.
We check whether the next image is loaded before switching to it, and it works fine on Chrome, Safari, IE, and all mobile browsers, however on Firefox we sometimes get a white flash.
This problem also happens if we make sure that all the images are preloaded so it's not a problem that FF shows the image before it has finished loading. I've seen the question asked elsewhere but from the user's perspective, and the solution was to disable hardware graphics acceleration, which does not solve completely the problem but reduces it. However we obviously can't ask that from our users.
Similar problems were reported in other questions:
jquery animate (height) causes background-image flickering in firefox
Image Flickering only in Firefox
Firefox background image flickering when using multiple instances and background-size
skrollr background image flicker in Firefox
However none has a clear solution. Does anyone know how to correct for this?
Cheers!
I am working on a web page, that has to be 100% high. I did it so, it works fine everywhere, except on Android Firefox.
The problem is:
When I open the page for first time, in landscape mode - the address bar overlaps the content.
If I do orientation change - it gets OK in portrait mode, and when I go back to landscape mode - it's OK there too. The problem appears only in landscape mode, before any (eventual) orientation change.
Tried many things, mostly some scrollTo() solutions, but nothing worked.
Thanks in advance.
I believe this is just how the Firefox app works. You could state in your (CSS) style sheet a 10 to 15 pixel "margin-top" for the body. This would create a black space at the top of the page. You could just adjust that height accordingly.
You could also try to check for that browser with a javascript and specify a new CSS with the "margin-top" adjustment if you didn't want it to adjust except on the Firefox app.
When scaling an SVG element that contains text the text fails to redraw correctly. This problem only seems to occur in Safari (tested in Safari 5.1.7) on the desktop, it renders correctly on the iPad, and in the other major browsers, including the developer preview of Safari 6
See the following jsfiddle for a demonstration of the problem.
http://jsfiddle.net/aBW25/
Viewers that experience the problem will not see the white text in the center of the red square, or the text will be rendered incorrectly.
Run the demo in a browser such as Chrome or Firefox to see the correct output.
Has anyone else experienced this problem or know of a way to get around it?
Thanks