Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
Like Tree1Likes

Thread: xbrowser phenomenon

  1. #1
    Junior Member
    Join Date
    Jul 2013
    Posts
    5
    Member #
    36700

    xbrowser phenomenon

    Hi,

    I used to develop back in days when chrome was not around and now that I need a website for myself I use firefox through out the process. unfortunately, loading it on chrome produces terrible results:

    it is rendered with some additional scrollbar
    fixed elements, like menu header and vimeo embed are not staying fixed and header disappears at times;

    Im using reset.css and then style.css to define looks. There are slight problems that needs to be fixed for it to validate, but I doubt that it would be the cause..

    Looking for any tips on troubleshooting or known xbrowser issues would be very much appreciated.
    You can find a working copy HERE

    Thank you,
    Vobla

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    The best two tips I can give you are that:

    1) There are no general cross-browser tips, other than "when you design it, design it with as many different browsers open as possible throughout the process". That way, if one browser fails at something, you'll have a better idea of where and why because you won't have created a whole page before checking.

    The reason there are no general tips is because there is an infinitesmal amount of ways to code things. Everyone on some level does something differently if they're in any way creative.

    2) Never...never...EEEEEEEEEEEEEEEEEEEEEEVER...use Eric Meyer's reset. For anything. At all. Yeah, he's a CSS guru and we should all do what he says and worship the ground and walks on, but until he fixes that abortion he calls a CSS file, you don't need or want to use it.

    If you're not sure why you shouldn't use it, put an ordered list on a page somewhere and watch what happens. This isn't the only thing wrong with it, but it's enough by itself.

    Now, with that said, I'm having a hard time loading your page. It flat-out crashed in Firefox for me and I do see your Chrome issues. It may be as simple as application of a z-index to your nav and header, however (apply a z-index of 1 to your header and 2 to your nav...you may want to go higher).
    vobla likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Jul 2013
    Posts
    5
    Member #
    36700
    Quote Originally Posted by TheGAME1264 View Post
    2) Never...never...EEEEEEEEEEEEEEEEEEEEEEVER...use Eric Meyer's reset.......
    removing it solved the scrollbar issue.

    Quote Originally Posted by TheGAME1264 View Post
    Now, with that said, I'm having a hard time loading your page. It flat-out crashed in Firefox for me and I do see your Chrome issues.
    may I ask you to expand on ffox crash. to my experience ffox on win7 and osx renders ok.

    Quote Originally Posted by TheGAME1264 View Post
    It may be as simple as application of a z-index to your nav and header, however (apply a z-index of 1 to your header and 2 to your nav...you may want to go higher).
    when you load the page you already see 4 z-indexed layers that works ok on safari and ffox.

    further testing shows that removing vimeo embed (line 41) and webgl canvas element (line 142) solves all issues. would it be safe to assume it's chromes inability to cope with the mash of fixed/z-indexed/canvas elements? found some posts online with similar problems, none solved.

    Cheers,
    Vobla

  5. #4
    Junior Member
    Join Date
    Jul 2013
    Posts
    5
    Member #
    36700
    renders normally with removed canvas elements

  6. #5
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    I've looked at your CSS and I really think the problem is all the "position:fixed" you have used. I do almost all of my hand-coded sites, including parallax ones - with relative positioning.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  7. #6
    Junior Member
    Join Date
    Jul 2013
    Posts
    5
    Member #
    36700
    Quote Originally Posted by AlphaMare View Post
    I've looked at your CSS and I really think the problem is all the "position:fixed" you have used. I do almost all of my hand-coded sites, including parallax ones - with relative positioning.
    I dont see why fixing position should be the problem. I specifically want elements to be relative to the browser window not relative to their normal position. still, as i mentioned previously it works nicely if i remove vimeo embed and webgl elements, so i'll look for problems there..
    and it is 100% hand coded.

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    It generally isn't....but if you want elements to be relative to the browser window, you generally need to make them top-level elements. In the case of your particular canvas, it's contained within a div. I've found fixed positioning to be flaky across all browsers on some level when that occurs. So whenever I want to fix something, the parent element is the body. Alternatively, you could fix the div the canvas is contained within and remove any of the style on the canvas.

    As far as your nav goes, take the float off of your unordered list. You don't need it here because you've already centered your nav tag inside of the header. That may explain the hidden nav thing in some instances (see below). If you insist on using the float (and there's no reason to), remember TheGAME1264's Immutable Law of Floats: When you float, you must clear. Strange behavior will often occur as the result of an uncleared float.

    I'm getting two totally different results on two versions of Chrome...one on my desktop, which is XP64, and one on my laptop, which is Win7. The Win7 version does exactly what I would expect...it fixes the menu at the top, and the canvas slides up with the rest of the content (again, since the canvas is fixed relative to the div). That suggests that Chrome isn't the problem...the two version numbers of Chrome are exactly the same (Version 27.0.1453.116 m). Try some of the stuff I've suggested above.

    Your general rule of thumb should be to assume that you're wrong first, and then blame the browser after...the only exception is if you come up with a workaround to the problem, in which case you may or may not be able to blame the browser. Finding similar problems online that are unsolved doesn't imply anything either...most of the time, there's some underlying coding issue, and most people really aren't coders by nature as they're quick to blame browsers. There's a lot of blame assigned to IE, for example, for problems IE had little to nothing to do with. There are reasons that IE sucks (their refusal to remove ClearType in later versions, for example) and they bring a lot of things on themselves, but quite often they get dumped on when people code for one browser first and then others after. I'm not trying to lecture you or anything...I'm just trying to explain the reality of the situation.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    What he said...

    only thing I can add, generally Chrome and FF will render almost everything identical as long as the HTML and CSS validate, if one or the other or god forbid, both don't validate, then all bets are off.

    if you search these forums, I believe you'll find some of the same general concerns over the Vimeo embed... ( depending on the version and method used to embed, as well as the doc type ), it will or won't validate, if it doesn't validate, most times it breaks other stuff.

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Actually, that leads to an interesting question...if Vimeo is indeed part of the problem (or at least the code used to embed is), what about using YouTube or Dailymotion or something else to get around that?
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    yes, indeed it is a interesting question... as little video as I actually use, theres always 3-4 ways to properly embed a video.. normally the code provided by the video providers is pretty "transparent"... but vimeo ( in my opinion ) is the least... something in their provided "player" code gets in the way almost every time a client has used it. There are numerous "fixes" where others in the same boat have written some javascript functions that are called "after" the page is loaded to load the player... that appear to work nicely. can;t remember where I found it... was 2 years or so ago when I ran into this... but it was a validation issue with their "players" provided code.

    I rarely use video from a 3rd party since I have my own servers, I'm normally hosting the video and have numerous code sets to embed them in pages on my servers and some client sites that I don't host.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:23 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com