Fixing position:fixed elements stuck in the middle of the page on iPhone Safari
We ran into an annoying bug over at Gigwalk while building a mobile webapp running inside Phonegap. We have a toolbar at the top of all our pages which is set to position:fixed, but every once in a while it would get stuck in the middle of the page. We tried several different proposed solutions, but this one worked for us. Run the following function after the page loads and it will force Safari to re-orient it's elements and puts the position:fixed toolbar back where it was supposed to go.
var fixPositionFixedElements = function(elem){
elem = elem || document.documentElement;
// force a reflow by increasing size 1px
var width = elem.style.width,
px = elem.offsetWidth+1;
elem.style.width = px+'px';
setTimeout(function(){
// undo resize, unfortunately forces another reflow
elem.style.width = width;
elem = null;
}, 0);
};
To: @mattccrampton
0
Other Posts
![Updating File Create Date From Exif Data](/images/blogHeaderImages/2022-03-28-updating-file-create-date-from-exif-data.png)
When exporting photos from a service like Flickr, perhaps after they've given notice that they're going to delete our photos if you don't subscribe to......
![All Truthy and Falsy Javascript Values](/images/blogHeaderImages/2020-04-28_all_truthy_and_falsy_javascript_values.png)
All Truthy and Falsy Javascript Values In Nodejs, every value has an associated boolean, true or false, value. For example, a null value has an......
![Google Forcing Nest Cameras Visual Indicator Light To Be On](/images/blogHeaderImages/2019-08-14-Google_forcing_nest_cameras_visual_indicator_light_to_be_on.png)
Google Forcing Nest Cameras Visual Indicator Light To Be On Received the following email from Google today... Full email text... Recently, we shared our commitment......
![Posting to Twitter with Python - Part Two - Posting Photos](/images/blogHeaderImages/2019-07-06-step_by_step_tutorial_to_post_to_twitter_using_python_part_two-posting_with_photos.png)
Posting to Twitter with Python - Part Two: Posting Photos NOTE: This is part two of my posting to Twitter with Python tutorial. If you......
![Doubleclick to open a file in VIM from OSX](/images/blogHeaderImages/2019-02-19-doubleclick_to_open_in_vim_on_osx.png)
Doubleclick to open a file in VIM from OSX I use VIM for just about everything from note taking to coding to keeping track of......
![Sign Into Gmail Without Signing Into Google Chrome](/images/blogHeaderImages/2018-09-26-sign-into-gmail-without-signing-into-google-chrome.png)
Sign Into Gmail Without Signing Into Google Chrome Unfortunately, Google has made changes to Chrome since this blog post was posted which removed the options......
Other Software Development Blog Posts
![Updating File Create Date From Exif Data](/images/blogHeaderImages/2022-03-28-updating-file-create-date-from-exif-data.png)
![All Truthy and Falsy Javascript Values](/images/blogHeaderImages/2020-04-28_all_truthy_and_falsy_javascript_values.png)
![Google Forcing Nest Cameras Visual Indicator Light To Be On](/images/blogHeaderImages/2019-08-14-Google_forcing_nest_cameras_visual_indicator_light_to_be_on.png)
![Posting to Twitter with Python - Part Two - Posting Photos](/images/blogHeaderImages/2019-07-06-step_by_step_tutorial_to_post_to_twitter_using_python_part_two-posting_with_photos.png)
![Doubleclick to open a file in VIM from OSX](/images/blogHeaderImages/2019-02-19-doubleclick_to_open_in_vim_on_osx.png)
![Sign Into Gmail Without Signing Into Google Chrome](/images/blogHeaderImages/2018-09-26-sign-into-gmail-without-signing-into-google-chrome.png)
![Four Steps To Write An OSX AppleScript to Gather ALL Windows](/images/blogHeaderImages/2018-08-03-applescript_to_gather_all_windows_on_osx.png)
![Four Simple Steps To Post To Twitter Using Python](/images/blogHeaderImages/2017-11-03-step_by_step_tutorial_to_post_to_twitter_using_python.jpg)
![The Mega List Of Free Image Sites For Blogging](/images/blogHeaderImages/2017-11-01-mega_list_of_free_image_sites_for_blogging.jpg)
![A VIM User's Experiments With GUI Code Editors](/images/blogHeaderImages/2017-10-30-a_vim_users_experiments_with_gui_code_editors.png)
![All Python Assert Methods In One List](/images/blogHeaderImages/2017-08-04-a_list_of_all_python_assert_methods.png)
![Invalidate All Cloudfront Files](/images/blogHeaderImages/invalidating_all_files_from_a_cloudfront_distribution_cache_from_the_command_line.png)
![Query an NTP server from Python](/images/blogHeaderImages/88291892461.png)
![Mac Terminal WiFi Commands](/images/blogHeaderImages/64144666914.png)
![Running a for-loop over a Jinja2 dictionary](/images/blogHeaderImages/2012-09-09-iterating_over_a_dict_in_a_jinja_template.png)
Other Blog Posts
![209 Netfix Categories You Dont Know About](/images/blogHeaderImages/2018-09-12-209-netflix-categories-you-dont-know-about.png)
![Easy Recipe For Making Chili at Home with Matt Crampton](/images/blogHeaderImages/2017-11-09-how_to_make_easy_chili.png)
Media Appearances
![Wall Street Journal Live Interview with Matt Crampton](/images/blogHeaderImages/2017-10-26-wsj_live_interview.png)
![NBC Press Here interview with Matt Crampton](/images/blogHeaderImages/2017-10-26-nbc_press_here.png)
![Mobile Monday Silicon Valley panel with Matt Crampton](/images/blogHeaderImages/2017-10-26-mobile_monday_panel.png)
![Human Cloud panel with Matt Crampton](/images/blogHeaderImages/2017-10-26-human_cloud_panel.png)
![Fox Business Interview with Matt Crampton](/images/blogHeaderImages/2017-10-26-fox_business_interview.png)
![Fox Business interview on furloughed government workers with Matt Crampton](/images/blogHeaderImages/2017-10-26-fox_business_furloughed_workers_interview.png)
![Fortune Magazine Live Interview with Matt Crampton](/images/blogHeaderImages/2017-10-26-fortune_magazine_interview.png)
![CCTV Interview with Matt Crampton](/images/blogHeaderImages/2017-10-26-cctv_interview.png)
![8th and Walton show interview with Matt Crampton](/images/blogHeaderImages/2017-10-26-8th_walton_interview.png)
Print Interviews
![MLive Interview with Matt Crampton](/images/blogHeaderImages/2019-04-25-mlive_interview.png)
![Techcrunch Interview on Gigwalk with Matt Crampton](/images/blogHeaderImages/2017-10-26-techcrunch_interview.png)
![Salon.com Labormetrics Interview with Matt Crampton](/images/blogHeaderImages/2017-10-26-salon_labormetrics_interview.png)
![Huffington Post Interview with Matt Crampton](/images/blogHeaderImages/2017-10-26-huffington_going_against_the_flow.png)
![CBS Pulse Interview with Matt Crampton](/images/blogHeaderImages/2017-10-26-cbs_pulse_article.png)
![Silicon Valley Business Journal - Best CIO - Matt Crampton](/images/blogHeaderImages/2014-06-20-silicon_valley_business_journal_best_cio_matt_crampton.png)