I am experiencing flickering when fading in elements using webkit transition opacity.
The issue only occurs in Safari but it is really glitchy.
I have tried -webkit-backface-visibility: hidden; and -webkit-transform: translate3d(0,0,0);
but none are working, does anyone have any ideas?
http://www.timbretday.com
solved it, adding keyframes in the CSS stopped the flicker
Related
I would like develop a VueJS swip cards app but interactJS disable the y-axis native scroll on mobile. I reproduce my app on this codepen : https://codepen.io/ostaladaFab/pen/LYQBvXm/7acc1eb6e6afb3583c7f65133019f64d.
I can't scroll anymore on mobile. A solution ?
The shorter url : https://shorturl.at/dAS14
Thanks.
Remove these two lines of CSS from your code, and the scrolling issue should be gone.
-ms-touch-action: none;
touch-action: none;
For these two lines, your touches are being ignored.
I am in need of disabling the scrollbar which appears in the application. Using the default web browser there is a option called ScrollBarsEnabled which you can set true of false allowing the scrollbar to be hidden or not while scrolling.
Sadly i dont think Gecko has this feature seeing as its not listed!
I came across a similar post which had my issue but all that does is change the css which then causes my page to become not scroll-able.
Thread: how to hide scrollbar in gecko webbrowser control in c#
Does anyone to this date, have any idea how to hide/disable that scroll bar?
A different workaround could be to move the margin a little bit, as described here
#content browser {
margin-right: -14px !important;
overflow-y: scroll;
overflow-x: hidden;
}
When opening a Bootstrap modal (eg the GetBootstrap modal sample), the rest of the page is subtly faded out to draw attention to the modal:
How is Bootstrap accomplishing this? It seems that the class .modal-open is added to the body, but this only sets overflow: hidden. What else is Bootstrap adding/changing to cause that effect? Is the positioning of the modal within the page important?
(This is a roundabout way of asking why my modal isn't fading out the background when it's open. The code is too complicated to post, and presumably there's a flaw in my markup or CSS. If I knew how Bootstrap was accomplishing the opaque background I may be able to debug why it's not working for me.)
Bootstrap add a div and adds some classes to it. Which has black background with .5 opacity set. And add style to set height as viewport / browser screen.
<div class="modal-backdrop fade in" style="height: 984px;"></div>
If your modal is not fading out, check if you are using :
display:block!important /* notice !important */
When the modal appears, it adds a div container with the class modal-backdrop fade in before the modal-dialog container.
Using version 2.1.0 of durandal I found a problem I am not able to fix it seems.
I'm using a dialog but the content is too big for the screen, the buttons - which are at the bottom of the screen - kind of fall off, under the screen.
This mostly comes from the fact that I use visible bindings using knockout the show and hide elements on the dialog making durandal position it wrong and/or not showing a scrollbar for the dialog/screen when it overflows.
Does anyone know how to solve this by either getting a scrollbar or repositioning it on the screen?
I have tried the reposition method but to no success.
Moreover I tried both of these:
Responsive dialog
Durandal modal dialog
Both did not help out and I'm still stuck on this.
Anyone got any idea how to get the scrollbar on the dialog or on the screen so I can actually see my buttons by scrolling? Or is there a better way to get around this?
I'm not sure this is what you want
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
http://jsfiddle.net/farizazmi/5Lnqurar/
I have top menu in Ipad with position: fixed and width: 100% in my site, which is displayed fine, when keyboard is shown and orientation is changed (f.e., from Landscape to Portrait) in Safari IOS5, but not in IOS6.
In IOS6 after this actions top menu becomes shifted to right at 128px. I found some very close problem, related exactly to 128px in StackOverflow iOS6 Safari orientation change bug?, but solution was not applicable to my case.
So, investigating a little, I changed in javascript event "orientationchange" the CSS property of top menu position:fixed to position:relative.
And that helped, my top menu redrew correctly. But, as I needed exactly position:fixed later for my site, I added setTimeout() method, which returned CSS position back to value fixed.
$(window).bind("orientationchange", function(e){
$('#framecontentTop').css('position', 'relative');
setTimeout(function(e){
$('#framecontentTop').css('position', 'fixed');
}, 500)
});
I think, it is the temporary solution. Does somebody know real root cause of a problem, or it is IOS6 bug?