I am facing a flickering issue, on re-sizing, with my Firefox web browser. I think it is because of the use of SVGs on the page. I tried adding the transition css property by referring the following links, but didn't help.
1. https://css-tricks.com/forums/topic/can-i-stop-flickering-on-hover/.
2. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Any help or a starting reference would be appreciated. Thank you. I am new with css. One more thing, the screen does not flicker in Chrome or IE. I hope this information helps and this is not a stupid question.
Related
I've been developing a mobile-first site, using Firefox as the primary browser. I have a branding logo at the top of the page, loaded by way of the WordPress customizer. The logo appears fine in Firefox, but disappears in Chrome and Safari when at a width of 320px. (That's the base width for this project.)
I'm just troubleshooting and trying to find the best way to fix the problem. I'm not really sure what's causing the issue, yet, though. I was hoping to get some other perspectives on this.
Here's the link:
--- link removed ---
Thanks!
I would like to suggest you something that had helped me a lot of times when I did not know from where comes a problem:
Reduce the content only to the part you want to fix(or in case if you have a bug and do not know from where comes - start removing code element by element).
BTW in the developer tools is showing a lot of errors.
Thanks, Marin. I appreciate your suggestions. I think my server at work may be contributing to the issue. For the time being, though, switching the width and height from % to em has at least resulted in the images being visible in chrome and safari. I think I'll have to wait until I can test it outside my workplace to be sure, though. Lol. Thanks, again.
When the browser is IE9 and it has a horizontal scrollbar, sometimes icons go missing from my CKEditor. This happens especially during Undo and when switching between source mode and back. The horrible part is that I can't replicate it outside my site (sorry no linking), but I can replicate it easily within it by simply adding a table and then pressing undo. The icons come back when I move my mouse over them (Maby I should do a video to demonstrate?).
I have no idea what is causing this so any suggestions are welcome. I don't touch the icons in my custom code at all. Have you seen a similar issue to this? What could be causing it? Is there anything I can try?
Added: YouTube demonstration of the issue happening
Missing icons:
Very weird. Seems that disabled buttons lose their icons. I see that you modified CSS a little bit - haven't you overwritten path to icons strip for disabled buttons as well? Or have you updated CKEditor installation recently, but without stylesheet you modified earlier? Maybe this is a cache issue - path is the same, but IE9 remembers old file where those icons were in different positions.
Turns out that it indeed was some insanity inducing IE9 rendering bug with CSS opacity.
For others experiencing this bug: I fixed it by manually editing the CKEditor editor_ie.css. There is a part like this: .cke_button_disabled .cke_button_icon{opacity:.3}. All I did was comment out the opacity, leaving .cke_button_icon{/* opacity:.3 Removed By Nenotlep */}.
Note that a "fix" like this is a Bad Idea, you have to remember to manually maintain the change in your code repository.
My one-page website (http://www.stefaanoyen.be) features a sticky navigation, but it doesn't work as expected on my iPad. It always stays on top of the page, but when I click the links, nothing happens. The links only work when I'm on the top of the page or when the section the link is pointing to is already partially visible.
I don't know if this is a javascript, css or html problem. In short, I have no clue why it's going wrong, please help me out here : )
Thanks so much for helping me out!
Stefaan
Pretty sure postion:fixed on mobile browsers is not supported. Check out this quirksmode article, it explains why. http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
I have a div, so that when I click, it will toggle to expand, or retract. It works pretty well on all browsers, though there is a thing that intrigues me. On Google Chrome when it retracts it leaves small lines from the movement.
www.rezoluz.com/login.php - The page
To see it, open that page with Google Chrome. And click on the register button twice, on the second time it will leave lines, normally, but not on other browsers. I'm using a standard .animate, with jquery. All help is greatly appreciated.
SCREENSHOT:
Also, here is a jsfiddle showing the result : http://jsfiddle.net/rwQPu/2/ . Error in Chrome 21.0.1180.81 beta-m Win7.
It's a bug of chrome. See a previously asked question here :
Odd “shaking” effect when animating width with jQuery (only in Chrome!)
This is not a coding problem but actually a bug in certain versions of Google Chrome, as unlikely that may sound.
There is no fix as far a I know, we just need to wait for Google to resolve their problem, knowing Google that will be done from the moment they find out about it.
I'm developing a product to be used by a number of customers alongside our Web application.
Quick background:
These customers have incorporated into their pages a widget that we've developed.
The widget's content can be modified by using our application.
The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.
The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:
http://skitch.com/troywarr/dtexp/example-good
However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:
http://skitch.com/troywarr/dteqx/example-bad
As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.
I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.
I created a test bookmarklet as a live example. To see it, please:
Open Firefox (the version under development currently only works there reliably).
Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
Click the bookmarklet while on that page, and you should see what I'm referring to.
Thanks very much in advance for any help! This has me baffled.
I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.
The iframe inside DIV#onespot_nextclick needs a background color of #FFF.
Simple!