I've been tasked with an odd assignment.
We have a png image of a form that we're overlaying HTML form elements on top of. Since our users are on a variety of devices, I've had to design it so the form resizes to stay at 95% of browser width. Thus, all the form elements are positioned and sized using percentages (yes, I know this is ugly, but it works).
I've noticed what I'm perceiving as a bug and wondering if anybody else has encountered this: on Webkit browsers, on Mavericks only, and it's only sporadically, when the page loads, the fields appear blank. They have values (as can be demonstrated by firing a jQuery .val() command), but they're just not visible. Upon resizing the window or selecting a field, the value magically appears.
This is very confusing to me, and it's so odd that it's such an isolated variety of factors.
Anybody else able to duplicate, or has run into this, and any idea of how I can resolve this? I've actually been able to do a "hacky-fix" where, on page load, I do a resize of my main content div from 95% to 95.01%, and that redraw fixes everything, but I don't like such a hack.
We had the exact same issue and we've found that the root cause is a css transition we were using to show the page from alpha 0 to 100. So as soon as we removed that transition all the fields were shown correctly. I liked you hack BTW
Related
I know this has been asked many times, and I have been searching for the answer in a lot of places but I can't seem to fix my code. Thank you for reading this because I'm going crazy here! First I had a different z-index problem with safari, than another with explorer, but now the z-index problem I'm having with mozila I can't fix in any way. I code in chrome, where it seems to work perfectly (for me it seems at least!)
I believe now it works more or less fine in most browsers but not on mozila. The idea of the page is to make (only with CSS because that's the only language supported by the website) a flipping book of several pages. I see some examples around of CSS only flipping cards (only one page), but not a book of more than one page. So I essentially overlap several "cards", in order to give this effect. You can see the demo from codepen here: pkrein/pen/qBOewem
Btw I do know this code is not as clean as it could be, but that's the way I figured to make a fuction like that works only with CSS, and I hope it will make sense for you.
Ok, so the matter is, the content inside the book pages is not "scrollable" on firefox. I guess this is indeed a z-index problem, because when I move any page outside the book, that is, from behind the rest of the content, it scrolls fine.
Let me know if I can give any more info that could help you understand my issue!
I figured a possible solution for this. It's not quite the solution for the problem itself but it's something that can make what I want to do work.
The problem was: (what I had to remove in order to make it work):
(1) The div #content-holder holding all the text inside the flap
(2) The div .preparation-text inside the .preparation (that's the text I want to scroll). That was a scrolling div (.preparation) inside a non-scrolling div (.preparation-text). I always add a scrolling div inside a non-scrolling div in order to hide the scrollbar, by adding a high padding-right to the inside div. I know I can use code to hide the scrollbar but it do not work in all browsers.
How I fixed:
(1) I just removed the #content-holedr divs, since it was not strictly necessary.
(2) I removed the .preparation-text and transformed .preparation into a scrolling div. Then I just covered the scrollbar with an image of the same size and colors as the background (a print of the layout).
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
Here is the web site: plantcatching.com
Set "Montreal" in the search textbox and hit Enter. The map should go there and show results (after you zoom in one notch I think). A panel will slide from the left for the list of results. This panel has a white arrow attached so that it's possible to collapse/expand it. Here is what happens:
On IE/Firefox: the panel slides well.
On Chrome: the first time the panel extends, it works well. Then any
new manipulation shows the issue. The content of the panel and the
tabs will change position only after the jquery.animate("left") is
finished.
I let you have a look at the css structure under firebug or other dev bar, but basically it seems that chrome doesn't like the various "position:relative" css rules inside the panel. The problem is that I don't control them. They are set by the mCustomScrollbar jquery plugin. To check that this is the actual reason, just zoom out a little until a small window appears notifying that you should zoom in again. This empties the content of the pane and collapses it. See how it closes nicely this time, since there is no content anymore in the pane.
The question is: how should I modify the css (the part I control) so that it works well in Chrome and continues to work well in other browsers?
Let me know if something is unclear, I will update this question.Thanks for your help.
There was no answer here, so I decided to fix it myself by adopting css3 transitions on chrome only. This is now far better but you will notice that the tabs are a bit lagging when the panel slides. This does not happen in non webkit browsers.
I've been working on a website for a little while now, doing most of my testing in Chrome, Firefox, and IE. As I'm wrapping things up, I've tried viewing it in Safari (on Mac, iPad, and iPhone). I've noticed that certain elements are misplaced in Safari. I've tried playing with the CSS, but I've had no luck.
The page can be viewed here - http://staging.princewebdesigns.com/gallais/
See specifically the logo (being pushed down into the banner), the font of the tagline in the banner (wrapping beyond the banner and extending too far to the left), the 'Featured Work' title wrapping, the project names wrapping, and the footer wrapping.
Here is how the page should look - http://staging.princewebdesigns.com/gallais/images/chrome.png
To see how it looks on my iPhone, change the link above to .../iphone.png
Any help is appreciated.
The issue is (I think) that you have your browser's text zoomed in.
I loaded the page in Safari 5.1 on Mac OS 10.7.3, and it loaded fine initially. When I zoomed normally, the layout stayed intact. As soon as I tried zooming just the text, the layout broke per your description.
That being said, you may want to think hard about how to make the layout more 'flexible' in the event a user does have their text size increased. In IE, for example, the default zoom is full page zoom, but a user can still increase their text size apart from zooming. It's worth testing your layout in those situations to make sure it doesn't completely derail. I'm not saying it has to be perfect, but still legible.
One idea is to try out different units. I've found that when declaring horizontal lengths (e.g. margin-left) using relative measurements works, but when declaring vertical lengths, (e.g. margin-top) using pixel measurements works better. For super critical items, like the site logo, positon:absolute may be a good route to try.
I'm working on building a website, and everything is pretty much done, but I'm running into issues that, from what I've read here, are a result of webkit in firefox and ie.
Here is one of the pages that is having problems:
http://prdesignstudio.com/Seattle.html
When you load it in Chrome or safari it works fine, the images are reflected at the bottom, and there are no images on a lower row. When you open it in Firefox or ie, on the other hand, there are no reflections, and the last image in the set is on a lower row. Another thing that's odd is that the problem doesn't occur on every page, and it also doesn't seem to be based on the number of images in the gallery. (The different pages can be found by clicking on portfolio)
Anyone know how to fix this? Also, if fixing it requires me to remove the webkit portions of the .css, does anyone know of something else I can do to get the reflections? They're not necessary, but I like them XD
All the page's code can be found here: http://jsfiddle.net/2DvSP/
Thanks in advance for any help.
As for the images appearing on a lower row and the occurance of this on not all but some pages, you have inline styles set
div calss="container" style="width: 2080px;"
If you increase the width, this problems does not happen in FF4.01 and IE9.