Opera is the only browser I've tested that doesn't recognize the links on my home page. I can click on a few of the images and go to the linked page, but most don't do anything when I click. The cursor even remains an arrow. Works in every other browser.
http://test.davewhitley.com/not-wp/mobile_test/
They are images wrapped in anchor tags and the grid is created with css columns.
Any ideas?
Update:
The same links that are not clickable also aren't inspect-able in opera's web inspector.
Update:
Please note that some of the images are click-able on the left hand side. Which images are click-able varies with the browser width. If you view the website > 1300px browser width then most of the images are not click-able on the right side.
This seems to be a known bug in Opera 11.6x which is fixed in the most recent previews of Opera 12. I don't know of any workaround right now, but given that a fix is coming in the not too distant future I would simply wait for it.
Related
I am developing a website: http://www.techniquetolife.com
It's basically a div 5x as big as the window inside window sized div, with other divs within the large div, using the overscroll and scrollTo plugins to navigate.
The website works perfectly fine in Safari and Firefox for OS/X. But I am having serious trouble making it work in Chrome. I'm not sure if it's an Chrome OS/X only problem, but whenever I scroll over one of the inner divs within the large div, the whole browser slows down, this only happens in Chrome...
If I disable overscroll and use the scrollbars it works 100% fine, but I really want to use the overscroll drag to scroll plugin.
I am no good at coding so any help would be greatly appreciated.
All of the plugins / browsers are on the latest version.
Okay, well I posted an answer to a similar question that I think this might be related too. I could be wrong though, but you could test it.
See the full question and my full answer here: Chrome slow scrolling with fixed position elements
Problem and How to Monitor It
The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with
► Right Click Page -> Inspect Element -> Timeline -> Frames
► Hit Record on bottom
► Go back to the page and drag scrollbar up and down
This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.
To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixed attribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.
The Easy Hack Solution
But I did find one hack to get around this issue that seems to have no downside as of now. By adding
-webkit-transform: translateZ(0);
To your fixed panel, putting that div in its own compositing layer.
I am having trouble with a custom template I currently have on my website: http://irishgourmet.ie
In the latest versions of Firefox, Chrome and Safari the images in the image placeholder (top right) all load fine and in the correct dimensions. However in the latest version of IE, the first image loads fine then the subsequent images are huge. This trend applies to every category page.
Anyone have any ideas?
Firstly, definitely get your hands on Firebug Lite for IE. I use the bookmarklet. It takes a while to load on some versions, but has definitely saved my ass more than once.
Secondly, I'm having quite the opposite problem. I see no issue with the images in the very top right, but if you'r referring to the image carousel on the right, the first carousel image is fine, but the others are being set to
width: 178px;
height: 30px;
And are loading very small. They look like this
Hope this helps in some way.
I'm developing a firefox addon and would like to have a fixed position (relative to the browser) semitransparent panel with 3 icons shown at the corner of every browser content area. These buttons will have to be able to communicate with a site that is not the site shown.
I know it would be possible to inject a fixed position div to html but I want the buttons to communicate with external site when pressed and also query information when they are loaded so I think that would violate same origin policy. This wouldn't work with image or other direct media urls either.
What would be the easiest way to create the floating icon panel?
After about of week of work I found it. Here is the answer, I hope this helps someone else:
http://marcada.ms/2010/02/getting-content-on-top-of-the-browser-space-using-xul/
The above adds the panel, transparency is not working (at least not in linux what I work with) because of the following bug. Sigh... opened in 2007 and not closed in 2012.
https://bugzilla.mozilla.org/show_bug.cgi?id=408284
edit2: I ended inserting html data to the body of the document using files from extension folder. Works very well including transparency.
edit3: If anyone is interested how this works in my plugin, check my live site at http://www.upmarker.com
I've got a Wordpress site with some CSS3 rules applied to some images that rotate the images and have a hover effect on rollover too. Problems are showing up in Safari & Firefox when you hover on and then off these images and I can't seem to locate any similar issues by people on the Interwebs.
See http://tinyurl.com/3n2eude and hover on and then off the images (the slightly rotated ones):
Member name goes blurry and then back to normal (Firefox)
Member image border becomes jagged (Firefox)
A big black line displays to the side of the member images sometimes when you hover back and forth between two member images (Safari)
If I disable the transform:rotate rules, it's all fine. So seems to be an issue with that rule. Just can't work out how to get around it.
Anybody got some ideas on how I could get around these or what might be causing it?
Thanks for any ideas you might have!
Bit old of a question but that problem is related with rendering on browser (from what I understood). It cannot be fixed on CSS/HTML side. It must be fixed on user side.
Fix: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/
More information about problem: CSS3 rotate - rendering problems in Firefox and Safari
If you browse a web page through Firefox, any image on the page can be dragged anywhere on the screen—but you can't drop it. Other browsers such as IE or Chrome do not allow dragging images.
Is this a issue? Why does Firefox allow dragging?
You can drag the image (like your favorite unicorn picture, I assume) to an explorer window and it will be saved there.
It does allow you to drop. Drop to explorer/desktop and it pastes the picture, drop to a input field or the address bar and it drops the image URL.
html does not support dragging/dropping. RIA's and some AJAX/javascript pages may allow dragging of images ... e.g a shopping cart.
You can disable this in the firefox configuration.
http://www.google.com/search?q=firefox+image+drag