SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Transitions are choppy / elements seem to collapse for a second when resizing browser

    Hello,
    I am building myself a template off of the HTML5 Responsive Boiler Plate and when adding an off-canvas navigation I noticed that the header collpases at times when resizing the page / browser.

    When making the browser bigger, than 481px I think, the header seems to collapse to 0 height and then instantly come back to its normal height.

    And, when under 481px and the off-canvas nav is trigged by clicking the navigation-list icon that then appears, it collapses to 0 width ( from right to left ) when the nav is either closed or opened ( by clicking on the navigation-list icon / 3 bars ).

    I would greatly appreciate any and all help finding out why this happens and fixing it.

    Just to make the experience smoother and less-flashy ( not as in Flash, but as in a literal flash ).

    Here is a link to a live URL of the page.

    Thanks in Advance & Best Regards,
    Team 1504

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You seem to be adding a fixed height to the header-container for less that 480px devices so you get a transition to the height but when you go wider you have auto height and transitions don't work with auto height so you get a transition from zero to the height set for small devices and then nothing for wider devices.

    You would be better off removing the height from the header-container for all widths.

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that advice, that makes sense. It fixed the collapsing that was happening when I was making the browsers bigger.

    But the width collapsing still happens when I click the navigation-list icon to open the off-canvas nav. Any ideas on how to fix that?

  4. #4
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,572
    Mentioned
    974 Post(s)
    Tagged
    14 Thread(s)
    Hey @team1504 ;
    We've built a new product at SitePoint to help people solve CSS problems in real-time. Yours looks like one that we could easily help you fix immediately.
    One of our CSS experts is online now and ready to help if you're interested.

    Head on over to http://codefix.sitepoint.com/ if you want to check it out.

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh, awesome! I'll head on overthere right now. Thank you for letting me know.

    Update: I'm not in the position to make online transactions right now. So, if anyone is willing to help me over the forums, I'd greatly appreciate it.
    Last edited by team1504; Feb 26, 2013 at 17:51. Reason: Update

  6. #6
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hey team1504,

    We're just looking for testers at the moment, so you won't be charged. Promise.

    Cheers

    alex@sitepoint.com
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  7. #7
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh, okay. Cool, I'll try it out then.

  8. #8
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @AlexW : When I try to submit the question, it says " We're sorry something went wrong " in red text.

  9. #9
    Team SitePoint
    Join Date
    Jan 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Team1504, can you try again now, thanks for helping test this for us.

  10. #10
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    First, I do recommend anyone who has a CSS issue to try out CodeFix as it is great.

    I think my issue may have been a little more complicated for it though.

    I thought we had found a solution and there was someone new waiting so we ended the CodeFix chat, but i realised that the solution presented was to give .header-container a height of 7em.

    Right after I made that change, I noticed that although the transitions were smoother, the width collapsing still happened to the header when the navigation-list icon was clicked.
    And, then, I noticed that I had a height applied to .header-container. Except it was in px units and @Paul O'B told me to remove it.

    Is it that EMs make smoother transitions that PXs or is there a better solution?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The code I gave fixed the collapsing of the header that you were talking about because there would be no transition and just a change. Alex probably suggested using a height so that either you get a smooth transition between heights or indeed keep the height the same so that there won't be an issue. ems or px should make no difference to the transition but of course ems are preferable measurements where possible.

    Regarding the width of the layout the it's basically the same problem. You have transitions set on elements so when something changes you get the transition. When you click the nav and the column slides out you are setting the page width to 80% so the transition goes from auto (effectively zero as far as transitions are concerned) to 80% and vice versa.

    It's a big drawback of transitions that they don't work on auto dimensions which is usually what you want.

    You could set the page wrap to 100% wide and then the transition will be smoother.

    e.g.
    Code:

    #page-wrap{width:100%}

    It should now slide from 100% to 80% and vice versa. There may be other inner elements following the same pattern so you would need to do similar.

    Transitions work best when you go from one fixed dimension to another.

  12. #12
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah, okay. Thank you very much for explaining.

    I understand now.

    Hopefully transitions will work with auto dimensions one day. Maybe in the CSS Transitions Level 4 Module.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •