locked
Command bar icons offset after update to VS 2013 Update 4 RRS feed

  • Question

  • It appears that the pixel offset on the sprites for the icons in the command bar buttons is offset. Is this just me and some CSS that I have added to the project that's interfering?


    Monday, December 1, 2014 2:27 PM

Answers

  • I'd be interested to see if you or anyone else experience the same issue with the HTML client.  

    To check, simply run a HTML client up in Chrome and hit ctrl+ to set the zoom level to 110%.


    What's chrome?  ;)  Just kidding, but no I've not experienced this prolly 'cuz I don't use chrome.

    Looks like a known issue - rounding error in browser zoom functionality.

    http://code.google.com/p/chromium/issues/detail?id=260319

    HTH,

    Josh

    • Marked as answer by Angie Xu Monday, January 5, 2015 12:05 PM
    Thursday, December 11, 2014 3:48 PM

All replies

  • It appears that this is in Chrome, not IE.
    Monday, December 1, 2014 2:31 PM
  • This also affects any sprite used like the one for the navigation menu in the header area.
    Monday, December 1, 2014 2:32 PM
  • And updating to the latest version of msls (2.5.2) as well as the CSS files does not fix the issue.
    Monday, December 1, 2014 2:37 PM
  • Hi cm.smith,

    Thanks for your feedback in Lightswitch.

    According to your description, I'm not sure whether this issue is related to Visual Studio 2013 update 4. For this issue, you can uninstall this update 4 first, and check whether this issue is existing.

    If it still has same issue, please don't hesitate to let me know.

    Best regards,

    Angie


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, December 2, 2014 9:39 AM
  • I uninstalled Visual Studio 2013 Update 4 and the issue is still there in Chrome version Version 39.0.2171.71 m
    Friday, December 5, 2014 6:31 PM
  • Hi Chris,

    We've noticed this issue for some time (probably effecting all versions of Visual Studio 2013) when running under Chrome with zoom levels not divisible by 50 (e.g. 75%, 90%, 110%, etc.).

    Whilst we've not delved into this problem, maybe the root issue is the same as you're experiencing.

    Thursday, December 11, 2014 10:23 AM
  • Thursday, December 11, 2014 11:53 AM
  • Not sure if this is related to style {box-sizing:border-box;}, but you could try this...

    Hi Josh,

    Sadly in our situation, this doesn't seem to be the case - thanks anyway.

    I'd be interested to see if you or anyone else experience the same issue with the HTML client.  

    To check, simply run a HTML client up in Chrome and hit ctrl+ to set the zoom level to 110%.


    • Edited by ChrisCookDev Thursday, December 11, 2014 12:55 PM
    Thursday, December 11, 2014 12:54 PM
  • Hi,

    Tried this and it's not working well in Chrome with zoom...

    To make it work, create your own custom icon and it works with zoom.

    Strange.


    Sven Elm

    Thursday, December 11, 2014 1:55 PM
  • Hi,

    Tried this and it's not working well in Chrome with zoom...

    To make it work, create your own custom icon and it works with zoom.

    Strange.


    Sven Elm

    "Hem"(Home in Swedish) is a custom icon, The rest are built in icons.

    The built in ones have a background-position and Chrome ignores the position changes when zooming.


    Sven Elm

    Thursday, December 11, 2014 2:16 PM
  • Hi,

    Tried this and it's not working well in Chrome with zoom...

    To make it work, create your own custom icon and it works with zoom.

    Strange.


    Sven Elm

    "Hem"(Home in Swedish) is a custom icon, The rest are built in icons.

    The built in ones have a background-position and Chrome ignores the position changes when zooming.


    Sven Elm

    This is the problem:

    .msls-large-icon .ui-icon-msls-gear {
        background-position: -248px 0;
    }


    Sven Elm

    Thursday, December 11, 2014 2:41 PM
  • I'd be interested to see if you or anyone else experience the same issue with the HTML client.  

    To check, simply run a HTML client up in Chrome and hit ctrl+ to set the zoom level to 110%.


    What's chrome?  ;)  Just kidding, but no I've not experienced this prolly 'cuz I don't use chrome.

    Looks like a known issue - rounding error in browser zoom functionality.

    http://code.google.com/p/chromium/issues/detail?id=260319

    HTH,

    Josh

    • Marked as answer by Angie Xu Monday, January 5, 2015 12:05 PM
    Thursday, December 11, 2014 3:48 PM
  • Hi Josh,

    Thanks, and as rounding does seem to be the culprit, I've attempted the work-around mentioned in the link you provided.  This can be implemented by adding the following to the user-customization.css file: -

    .msls-large-icon .ui-icon:not(.ui-icon-msls-home):not(.ui-icon-msls-custom) {
    	-webkit-background-size: 1398px 26px;
    }

    Whilst I've not fully tested the above, at first glance it seems to do the trick.  

    I'd appreciate it if someone could confirm this.




    Thursday, December 11, 2014 10:03 PM